<script setup lang="ts">
  import { ref } from 'vue';
  import { changePwd, pwdlog } from '@/api/userCenter';
  import { useUserStore } from '@/store';
  import { addUser } from '@/api/syssetting';
  import { FormInstance, Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { omit } from 'lodash';
  const formRef = ref<FormInstance | null>(null);
  const { loading, setLoading } = useLoading();
  const userStore = useUserStore();
  const handleSubmit = async () => {
    if (!(await formRef.value?.checkForm())) {
      try {
        setLoading(true);
        const fidata = omit(formRef.value?.formModel, 'user_id', 'user_name');
        const res = await changePwd({
          ...fidata,
          user_id: userStore.userID,
        });
        Message.success(res.msg);
        setLoading(false);
      } catch (error) {
        setLoading(false);
      }
    } else {
      Message.error('请正确填写表单！');
    }
  };
  const formType = ref();
  const formState = ref();

  const list = ref();

  onMounted(() => {
    getLogPwd();
  });

  function getLogPwd() {
    setLoading(true);
    pwdlog({
      user_id: userStore.userID,
    })
      .then((res) => {
        list.value = res.data.list;
        formType.value = [
          {
            label: '用户名',
            name: 'user_name',
            type: 'a-input',
            fieldProps: {
              span: 13,
              disabled: true,
              placeholder: '请输入',
            },
          },
          {
            label: '原密码',
            name: 'user_password',
            type: 'a-input',
            fieldProps: {
              span: 13,
              placeholder: '请输入',
            },
            rules: [
              {
                required: true,
                message: '请输入',
              },
            ],
          },
          {
            label: '新密码',
            name: 'user_new_password',
            type: 'a-input-password',
            fieldProps: {
              span: 13,
              placeholder: '请输入',
            },
            rules: [
              {
                required: true,
                message: '请输入',
              },
            ],
          },
          {
            label: '确认新密码',
            name: 'user_confirm_password',
            type: 'a-input-password',
            fieldProps: {
              span: 13,
              placeholder: '请输入',
            },
            rules: [
              {
                required: true,
                message: '请输入',
              },
            ],
          },
          {
            label: '上次修改时间',
            name: 'user_nick_name',
            type: 'a-countdown',
            fieldProps: {
              span: 13,
              start: false,
              now: 'now',
              format: list.value[0].create_time,
            },
          },
          {
            label: '密码过期时间',
            name: 'user_nick_name',
            type: 'a-countdown',
            fieldProps: {
              span: 13,
              start: false,
              now: 'now',
              format: '永不过期',
            },
          },
        ];
        formState.value = {
          user_name: userStore.user_name,
          user_password: '',
          user_new_password: '',
          user_confirm_password: '',
        };
      })
      .finally(() => {
        loading.value = false;
      });
  }

  const columns = [
    {
      title: '用户ID',
      dataIndex: 'user_id',
      align: 'center',
    },
    {
      title: '用户名称',
      dataIndex: 'user_name',
    },
    {
      title: 'IP地址',
      dataIndex: 'user_ip',
    },
    {
      title: '修改时间',
      dataIndex: 'create_time',
    },
  ];
</script>

<template>
  <div class="container">
    <a-card class="general-card" title="修改密码">
      <div style="width: 70%">
        <pro-form
          :loading="loading"
          ref="formRef"
          :form-json="formType"
          :form-data="formState"
          :gutter="20"
          @search="handleSubmit"
        ></pro-form>
      </div>
    </a-card>
    <a-row class="grid-demo">
      <a-col :span="24" style="padding: 20px">
        <div style="font-size: 16px; margin-bottom: 20px; margin-top: -20px"
          >最近10次修改密码日志</div
        >
        <a-table
          :loading="loading"
          row-key="log_id"
          :columns="columns"
          :data="list"
          :pagination="false"
        />
      </a-col>
    </a-row>
  </div>
</template>

<style scoped lang="less">
  :deep(.arco-statistic-value) {
    font-size: 15px;
  }
</style>
